<template>
  <div class="row">
    <div class="col">
      <ul class="nav nav-pills flex-column">
        <router-link to="/components/dialog" custom v-slot="{ href, navigate, isActive }">
          <li class="nav-item">
            <a :href="href" class="nav-link" :class="[isActive && 'active']" @click="navigate">Dialog 对话框</a>
          </li>
        </router-link>
        <router-link to="/components/accordion" custom v-slot="{ href, navigate, isActive }">
          <li class="nav-item">
            <a :href="href" class="nav-link" :class="[isActive && 'active']" @click="navigate">Accordion 手风琴</a>
          </li>
        </router-link>
        <router-link to="/components/messageBox" custom v-slot="{ href, navigate, isActive }">
          <li class="nav-item">
            <a :href="href" class="nav-link" :class="[isActive && 'active']" @click="navigate">MessageBox 提示框</a>
          </li>
        </router-link>
        <router-link to="/components/select" custom v-slot="{ href, navigate, isActive }">
          <li class="nav-item">
            <a :href="href" class="nav-link" :class="[isActive && 'active']" @click="navigate">Select 下拉选择</a>
          </li>
        </router-link>
        <router-link to="/components/listgroup" custom v-slot="{ href, navigate, isActive }">
          <li class="nav-item">
            <a :href="href" class="nav-link" :class="[isActive && 'active']" @click="navigate">Listgroup 列表组</a>
          </li>
        </router-link>
        <router-link to="/components/tooltip" custom v-slot="{ href, navigate, isActive }">
          <li class="nav-item">
            <a :href="href" class="nav-link" :class="[isActive && 'active']" @click="navigate">Tooltip 工具提示</a>
          </li>
        </router-link>
        <router-link to="/components/spinner" custom v-slot="{ href, navigate, isActive }">
          <li class="nav-item">
            <a :href="href" class="nav-link" :class="[isActive && 'active']" @click="navigate">Spinner 加载中</a>
          </li>
        </router-link>
        <!-- <router-link to="/components/test" custom v-slot="{ href, navigate, isActive }">
          <li class='nav-item'>
            <a :href="href" class='nav-link' :class="[isActive && 'active']" @click="navigate">Test 测试代码</a>
          </li>
        </router-link> -->
        <!-- 
        <router-link to="/components/table" custom v-slot="{ href, navigate, isActive }">
          <li class='nav-item'>
            <a :href="href" class='nav-link' :class="[isActive && 'active']" @click="navigate">Table 表格</a>
          </li>
        </router-link>
        
        <router-link to="/components/tree" custom v-slot="{ href, navigate, isActive }">
          <li class='nav-item'>
            <a :href="href" class='nav-link' :class="[isActive && 'active']" @click="navigate">Tree 树组件</a>
          </li>
        </router-link> -->
      </ul>
    </div>
    <div class="col-lg-9">
      <router-view></router-view>
    </div>
  </div>
</template>